<template>
  <div>
    <!--新增，编辑弹框-->
    <el-dialog title="企业碳核算" :before-close="beforeClose"
               :visible.sync="visible" :close-on-click-modal="false" @opened="opened" class="datav-dialog" width="60%">
      <el-tabs
        type="border-card"
        v-model="activeName"
        @tab-click="tabClick"
        stretch="true">
        <el-tab-pane name="first" label="基础信息" class="tabItem">
          <div class="formBody">
            <div class="input">
              <span>选择企业：</span>
              <el-select v-model="selHangYe" placeholder="请选择" size="mini">
                <el-option v-for="item in hangyeNames" :key="index" :label="item" :value="item">
                </el-option>
              </el-select>
            </div>

            <div class="input">
              <span>选择省份：</span>
              <el-select v-model="selProvince" placeholder="请选择" size="mini">
                <el-option v-for="item in provinces" :key="index" :label="item" :value="item">
                </el-option>
              </el-select>
            </div>
            <div class="input">
              <span>选择年份：</span>
              <el-select v-model="selYear" placeholder="请选择" size="mini">
                <el-option v-for="item in years" :key="index" :label="item" :value="item">
                </el-option>
              </el-select>
              <span style="margin-left: 20px;">选择月份：</span>
              <el-select v-model="selmonth" placeholder="请选择" size="mini">
                <el-option v-for="item in months" :key="index" :label="item" :value="item">
                </el-option>
              </el-select>
            </div>

            <div class="input" style="display: flex;flex-direction: row;align-items: center">
              <span>公司名称：</span>
              <el-input placeholder="请输入" size="mini" style="width: 60%" v-model="typingEnterpriseName">
              </el-input>
            </div>
            <div class="bottomButton">
              <el-button type="primary" size="smaller" @click="updateActiveName('second')">下一步</el-button>
            </div>
          </div>


        </el-tab-pane>
        <el-tab-pane name="second" label="能源消耗" class="tabItem">

          <el-card class="box-card mb">
            <div slot="header" class="clearfix">
              <span>固定燃烧（生产电力、热力或蒸汽）</span>

            </div>
            <div class="cardBody">
              <div class="inputItem" v-for="item in FixedCombustion" :key="item.value">
                <div class="inputTop">
                  {{ item.label }}
                </div>
                <div class="inputBottom">
                  <el-input-number :controls="false" size="mini" v-model="item.value"></el-input-number>
                </div>
              </div>

            </div>
          </el-card>
          <el-card class="box-card mb">
            <div slot="header" class="clearfix">
              <span>移动燃烧（建材运输、原料运输）</span>

            </div>
            <div class="cardBody">
              <div class="inputItem" v-for="item in FixeCombustion" :key="item.value">
                <div class="inputTop">
                  {{ item.label }}
                </div>
                <div class="inputBottom">
                  <el-input-number :controls="false" size="mini" v-model="item.value"></el-input-number>
                </div>
              </div>
            </div>
          </el-card>
          <el-card class="box-card ">
            <div slot="header" class="clearfix">
              <span>能源行业、制造业选填</span>

            </div>
            <div class="cardBody">
              <div class="inputItem" v-for="item in EnergyIndustry" :key="item.value">
                <div class="inputTop">
                  {{ item.label }}
                </div>
                <div class="inputBottom">
                  <el-input-number :controls="false" size="mini" v-model="item.value"></el-input-number>
                </div>
              </div>

            </div>
          </el-card>
          <div class="bottomButton">
            <el-button type="primary" size="smaller" @click="updateActiveName('first')">上一步</el-button>
            <el-button type="primary" size="smaller" @click="updateActiveName('third')">下一步</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane name="third" label="电热消耗 " class="tabItem">
          <el-card class="box-card ">
            <div slot="header" class="clearfix">
              <span>采购的电力、热力或蒸汽的消费</span>

            </div>
            <div class="cardBody">
              <div class="inputItem" v-for="item in PurchasingEnergyConsumption" :key="item.value">
                <div class="inputTop">
                  {{ item.label }}
                </div>
                <div class="inputBottom">
                  <el-input-number :controls="false" size="mini" v-model="item.value"></el-input-number>
                </div>
              </div>

            </div>
          </el-card>
          <div class="bottomButton">
            <el-button type="primary" size="smaller" @click="updateActiveName('second')">上一步</el-button>
            <el-button type="primary" size="smaller" @click="updateActiveName('fourth')">下一步</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane name="fourth" label="人员交通" class="tabItem">
          <el-card class="box-card mb">
            <div slot="header" class="clearfix">
              <span>员工差旅-交通方式</span>

            </div>
            <div class="cardBody">
              <div class="inputItem" v-for="item in EmployeeTravelTransportation" :key="item.value">
                <div class="inputTop">
                  {{ item.label }}
                </div>
                <div class="inputBottom">
                  <el-input-number :controls="false" size="mini" v-model="item.value"></el-input-number>
                </div>
              </div>

            </div>
          </el-card>
          <el-card class="box-card ">
            <el-tabs type="border-card">
              <el-tab-pane label="按总数">
                <div class="cardBody">

                  <div class="inputItem" v-for="item in EmployeeAttendanceEnergyConsumptionByTotal" :key="item.value">
                    <div class="inputTop">
                      {{ item.label }}
                    </div>
                    <div class="inputBottom">
                      <el-input-number :controls="false" size="mini" v-model="item.value"></el-input-number>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="按分项">
                <div class="cardBody">
                  <div class="inputItem" v-for="item in EmployeeAttendanceEnergyConsumptionByScore" :key="item.value">
                    <div class="inputTop">
                      {{ item.label }}
                    </div>
                    <div class="inputBottom">
                      <el-input-number :controls="false" size="mini" v-model="item.value"></el-input-number>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-card>

          <div class="bottomButton">
            <el-button type="primary" size="smaller" @click="updateActiveName('third')">上一步</el-button>
            <el-button type="primary" size="smaller">数据统计</el-button>
            <el-button type="primary" size="smaller">结果分析</el-button>
            <el-button type="primary" size="smaller">报告生成</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>



export default {
  data() {
    return {
      provinces : ["北京", "天津", "上海", "重庆", "新疆", "西藏", "宁夏", "内蒙古",
        "广西", "黑龙江", "吉林", "辽宁", "河北", "山东", "江苏", "安徽",
        "浙江", "福建", "广东", "海南", "云南", "贵州", "四川", "湖南",
        "湖北", "河南", "山西", "陕西", "甘肃", "青海", "江西", "台湾", "香港", "澳门"],
      years:[2017,2018,2019,2020,2021,2022],
      months:[1,2,3,4,5,6,7,8,9,10,11,12],
      selProvince:``,
      selYear:new Date().getFullYear(),
      selmonth: new Date().getMonth()+1,
      typingEnterpriseName:``,
      activeName: "first",
      hangyeNames: [`能源行业`, `制造业`, `商业`, `农林渔牧`, `建筑业`],
      selHangYe: '',
      num0: 0,
      FixedCombustion: [{
        value: 1,
        label: `原煤(吨)`
      }, {
        value: 2,
        label: `洗精煤(吨)`
      }, {
        value: 4,
        label: `其它洗煤(吨)`
      }, {
        value: 5,
        label: `煤制品(吨)`
      }, {
        value: 6,
        label: `型煤(吨)`
      }, {
        value: 7,
        label: `水煤浆(吨)`
      }, {
        value: 8,
        label: `煤粉(吨)`
      }, {
        value: 9,
        label: `焦炭(吨)`
      }, {
        value: 10,
        label: `其他焦化产品(吨)`
      }, {
        value: 11,
        label: `焦炉煤气(万立方米)`
      }, {
        value: 12,
        label: `高炉煤气(万立方米)`
      }, {
        value: 13,
        label: `其他煤气(万立方米)`
      }, {
        value: 14,
        label: `其他煤气(万立方米)`
      }, {
        value: 15,
        label: `天然气(万立方米)`
      }, {
        value: 16,
        label: `液化天然气(吨)`
      }, {
        value: 17,
        label: `原油(吨)`
      }, {
        value: 18,
        label: `汽油(吨)`
      }, {
        value: 19,
        label: `煤油(吨)`
      }, {
        value: 20,
        label: `柴油(吨)`
      }, {
        value: 21,
        label: `燃料油(吨)`
      }, {
        value: 22,
        label: `液化石油气(吨)`
      }, {
        value: 23,
        label: `炼厂干气(吨)`
      }, {
        value: 24,
        label: `其他石油制品(吨)`
      },],
      FixeCombustion: [{
        value: 1,
        label: `原煤(吨)`
      }, {
        value: 2,
        label: `洗精煤(吨)`
      }, {
        value: 4,
        label: `其它洗煤(吨)`
      }, {
        value: 5,
        label: `煤制品(吨)`
      }, {
        value: 6,
        label: `型煤(吨)`
      }, {
        value: 7,
        label: `水煤浆(吨)`
      }, {
        value: 8,
        label: `煤粉(吨)`
      }, {
        value: 9,
        label: `焦炭(吨)`
      }, {
        value: 10,
        label: `其他焦化产品(吨)`
      }, {
        value: 11,
        label: `焦炉煤气(万立方米)`
      }, {
        value: 12,
        label: `高炉煤气(万立方米)`
      }, {
        value: 13,
        label: `其他煤气(万立方米)`
      }, {
        value: 14,
        label: `其他煤气(万立方米)`
      }, {
        value: 15,
        label: `天然气(万立方米)`
      }, {
        value: 16,
        label: `液化天然气(吨)`
      }, {
        value: 17,
        label: `原油(吨)`
      }, {
        value: 18,
        label: `汽油(吨)`
      }, {
        value: 19,
        label: `煤油(吨)`
      }, {
        value: 20,
        label: `柴油(吨)`
      }, {
        value: 21,
        label: `燃料油(吨)`
      }, {
        value: 22,
        label: `液化石油气(吨)`
      }, {
        value: 23,
        label: `炼厂干气(吨)`
      }, {
        value: 24,
        label: `其他石油制品(吨)`
      },],
      EnergyIndustry: [{
        value: 1,
        label: `焦炭(吨)`,
      }, {
        value: 1,
        label: `其他焦化产品(吨)`,
      }, {
        value: 1,
        label: `焦炉煤气(万立方米)`,
      }, {
        value: 1,
        label: `其他煤气(万立方米)`,
      }, {
        value: 1,
        label: `电力(万千瓦时)`,
      }, {
        value: 1,
        label: `热力(百万千焦)`,
      }, {
        value: 1,
        label: `高炉煤气(万立方米)`,
      }, {
        value: 1,
        label: `其他煤气(万立方米)`,
      }, {
        value: 1,
        label: `燃料油(吨)`,
      }, {
        value: 1,
        label: `液化石油气(吨)`,
      }, {
        value: 1,
        label: `电力(万千瓦时)`,
      }, {
        value: 1,
        label: `热力(百万千焦)`,
      }],
      PurchasingEnergyConsumption: [{
        value: 1,
        label: `购入电力(万千瓦时）`
      }, {
        value: 1,
        label: `购入热力(百万千焦）`
      },],
      EmployeeTravelTransportation: [{
        value: 1,
        label: `航空累计票价(元)`,
      }, {
        value: 1,
        label: `高铁累计票价(元)`,
      }, {
        value: 1,
        label: `火车（硬座）累计票价(元)`,
      }, {
        value: 1,
        label: `累计市内交通费(元)`,
      },],
      EmployeeAttendanceEnergyConsumptionByTotal: [{
        value: 1,
        label: `员工总人数`
      }],
      EmployeeAttendanceEnergyConsumptionByScore: [{
        value: 1,
        label: `自驾员工人数`
      }, {
        value: 1,
        label: `公共交通员工人数`
      }],
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  created() {

  },
  methods: {
    opened() {

    },
    updateActiveName(data) {
      this.activeName = data
    },
    handleClose(key, keyPath) {

    },
    beforeClose() {
      this.$emit('update:visible', false); // 直接修改父组件的属性
    }
  }
}
</script>

<style>
@import "../../assets/styles/datav-dialog.scss";


</style>

<style scoped>
.tabItem {
  padding: 20px;
}

.mb {
  margin-bottom: 10px;
}

.cardBody {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.inputItem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 5px;

}

.inputBottom > * {
  flex-basis: 80px;
}

.inputTop {

  margin: 0 auto 5px;
}

.inputBottom {
  width: auto;
  max-width: 100px;
}

.bottomButton {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
}

.bottomButton > button {
  margin-right: 20px;
}


</style>

